<template>
  <app-page>
    <div class="vip_index">
      <app-list>
        <template #search>
          <el-form inline class="viplist_form">
            <el-form-item>
              <el-input v-model="pageData.query.key_word" placeholder="输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="pageData.query.login_status" placeholder="状态" style="width: 120px">
                <el-option label="全部" :value="-1" />
                <el-option label="离线" :value="0" />
                <el-option label="登录中" :value="1" />
                <el-option label="在线" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" class="hovepcvicecolor"
                @click="pageActions.handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="clickreset()">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- <div class="user_title">
            账号管理就是一种长期商品投资。
          </div> -->
        </template>
        <template #action>
          <el-button type="primary" class="hovepcvicecolor" icon="plus" @click="handleadd()">新增会员</el-button>
        </template>


        <div style="width: 100%;height: 100%" v-loading="pageData.loading">
          <template v-if="pageData.list.length > 0">
            <el-scrollbar height="100%">
              <div style="width: calc( 100% - 8px )">
                <el-row :gutter="16">
                  <el-col :span="8" v-for="(item, index) in pageData.list" :key="index">
                    <div class="item" :class="item.login_status == '2' ? 'login_success' : ''">
                      <div class="content">
                        <UserItem :data="item" :platformObj="platformObj" @openDeatil="openDeatil"
                          @refresh="pageActions.refresh()" @initData="pageActions.initData()"
                          @saveenergy="pageActions.openDialog('energy', item)" />
                      </div>
                      <div class="buttons">
                        <div class="user_switch">
                          <!-- <el-switch :model-value="item.status" size="large" :active-value="1"
                            :disabled="item.login_status == 1" :inactive-value="3"
                            :before-change="() => handleSwitchChange($index, item)" active-text="开/关"
                            inactive-text="开/关" inline-prompt /> -->


                          <el-switch :model-value="item.work_status" size="large" :active-value="0" :inactive-value="1"
                            :before-change="() => handleSwitchChange2($index, item)" active-text="暂停" inactive-text="暂停"
                            inline-prompt />
                        </div>
                        <div class="user_buttons">
                          <div v-if="item.login_status != 1">
                            <el-button type="primary" link @click="handleEdit(item)"
                              v-if="item.uid == userStore.user.uid">编辑</el-button>
                            <el-button type="primary" link @click="pageActions.openDialog('match', item)"
                              v-if="item.uid == userStore.user.uid">联赛</el-button>
                            <el-button type="primary" link @click="pageActions.openDialog('pk', item)"
                              v-if="item.uid == userStore.user.uid">盘口</el-button>
                            <el-button type="primary" link @click="pageActions.openDialog('monitor', item)"
                              v-if="item.uid == userStore.user.uid">监控</el-button>
                            <el-button type="primary" link @click="openbill(item)">账单</el-button>
                            <el-button type="danger" link @click="handleDelete(item)">删除</el-button>
                          </div>
                          <div v-else style="font-size: 13px; color: red">登录中,请勿操作!</div>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-scrollbar>
          </template>
          <template v-if="pageData.list.length == 0">
            <app-none :size="120">
            </app-none>
          </template>
        </div>




        <template #footerRight>
          <el-pagination @size-change="pageActions.handleSizeChange" @current-change="pageActions.handlePageChange"
            v-model:current-page="pageData.page" v-model:page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" background />
        </template>
      </app-list>
    </div>

    <AddItem v-model="dialog.edit.show" :data="dialog.edit.data" :parentdata="parentdata"
      @change="pageActions.refresh(true)" />
    <UserDetail :platformObj="platformObj" v-model="dialog.detail.show" :data="dialog.detail.data"
      @change="pageActions.refresh()" />
    <Match v-model="dialog.match.show" :data="dialog.match.data" @change2="changematch" />
    <Pk v-if="dialog.pk.show" v-model="dialog.pk.show" :data="dialog.pk.data" @change="changematch" />
    <Authorize v-model="dialog.authorize.show" :data="dialog.authorize.data" />
    <Monitor v-model="dialog.monitor.show" :data="dialog.monitor.data" @change="changematch" />
    <EnergyDialog v-model="dialog.energy.show" :data="dialog.energy.data" />
  </app-page>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http'
import { onMounted } from 'vue'

import AddItem from './AddItem.vue'
import UserDetail from './UserDetail.vue'
import Match from './Match.vue'
import Pk from './Pk.vue'
import Authorize from './Authorize.vue'
import Monitor from "./Monitor.vue";

import EnergyDialog from "./EnergyDialog.vue";

import UserItem from "./UserItem.vue";

const userStore = useUserStore()

const router = useRouter()
const parentdata = ref({
  value: 'agent',
  label: '新增代理',
})
const platforms = ref([])
const platformObj = ref({})
const sporttypes = ref({
  all: '不限',
  soccer: "足球",
  basketball: "篮球"
})
const { pageData, pageActions, dialog } = usePage(
  () => {
    const query = {
      page: pageData.page,
      page_size: pageData.pageSize,
      ...pageData.query,
    }

    if (query.login_status == -1) {
      delete query.login_status
    }

    return http.get('/member/member_list', {
      params: query,
    })
  },
  {
    query: {
      login_status: 2
    },
    dialog: {
      match: { show: false },
      pk: { show: false },
      authorize: { show: false },
      monitor: { show: false },
      energy: { show: false }
    },
  }
)

const openauthorize = row => {
  console.log(row)
}

const openDeatil = (data) => {
  pageActions.handleView(data)
}

const handleadd = () => {
  parentdata.value.status = 'create'
  parentdata.value.label = '新增会员'
  pageActions.handleAdd()
}
// 编辑
const handleEdit = row => {
  parentdata.value.status = 'update'
  parentdata.value.label = '编辑会员'
  pageActions.handleEdit(row)
}

const computedSwitchValue = status => {
  let a = 3
  if (status == 0 || status == 3) {
    a = 3
  } else {
    a = 1
  }
  return a
}

const clickreset = () => {
  pageData.query.key_word = ''
  pageData.query.login_status = -1
  pageActions.refresh(true)
}

const changematch = () => {
  pageActions.refresh(true)
}

const handleSwitchChange = async (rowIndex, row) => {
  let a = JSON.parse(JSON.stringify(row))
  console.log(a);

  a.status = a.status == 1 ? 3 : 1
  let body = {
    status: a.status,
    id: a.id,
    // login_rule_id: a.login_rule.id,
    // group_id: a.group.id,
    // source_id: a.source.id,
    // money_code: a.money.money_code,
    // proxy_ip_id: a.proxy_ip.id,
    // user_name: a.user_name,
    // pass_word: a.pass_word,
    // percent: a.percent,
    // remark: a.remark,
    // bc_type: a.bc_type,
    // amount: a.amount,
    // place_league: a.place_league,
    // place_pk_key_amount: a.place_pk_key_amount,
    // no_place_pk_key: a.no_place_pk_key,
    // no_place_pk_type: a.no_place_pk_type,
    // place_order_stakes: a.place_order_stakes,
    // login_status: a.login_status,
  }
  console.log(body);


  return http
    .post('/member/member_status', body)
    .then(() => {
      pageActions.refresh()
      ElMessage.success('修改成功')
      row.status = a.status
    })
    .catch(error => {
      console.log(error);

      pageActions.initData()
      ElMessage.success('修改失败')
    })
}

const handleSwitchChange2 = async (rowIndex, row) => {
  let a = JSON.parse(JSON.stringify(row))
  a.work_status = a.work_status == 1 ? 0 : 1
  let body = {
    status: a.status,
    work_status: a.work_status,
    id: a.id,
    login_rule_id: a.login_rule.id,
    group_id: a.group.id,
    source_id: a.source.id,
    money_code: a.money.money_code,
    proxy_ip_id: a.proxy_ip.id,
    user_name: a.user_name,
    pass_word: a.pass_word,
    percent: a.percent,
    remark: a.remark,
    bc_type: a.bc_type,
    amount: a.amount,
    place_league: a.place_league,
    place_pk_key_amount: a.place_pk_key_amount,
    no_place_pk_key: a.no_place_pk_key,
    no_place_pk_type: a.no_place_pk_type,
    place_order_stakes: a.place_order_stakes,
    login_status: a.login_status,
  }
  console.log(body);


  return http
    .post('/member/member_update', body)
    .then(() => {
      pageActions.refresh()
      ElMessage.success('修改成功')
      row.work_status = a.work_status
    })
    .catch(error => {
      console.log(error);

      pageActions.initData()
      ElMessage.success('修改失败')
    })
}
// 删除
const handleDelete = row => {
  ElMessageBox.confirm('将要删除会员，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      console.log(row.id)
      http.delete(`/member/member_delete?id=${row.id}`).then(res => {
        pageActions.handleSearch()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const openbill = (row) => {
  console.log(row);

  router.replace({ path: '/bill', query: { id: row.id, name: row.user_name, created: row.created_at, bc_type: row.bc_type } })
}

onMounted(() => {
  http.get('/config/get_bc_type', { params: { page: 1, page_size: 999 } }).then(res => {
    platforms.value = res.data.out_platform.map(item => {
      platformObj.value[item.bc_type] = item
      return item
    })
  })
})
</script>

<style lang="scss" scoped>
.vip_index {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  // padding: 40px 0;
  justify-content: center;
}

.status {
  background-size: 12px auto;
  background-repeat: no-repeat;
  background-position: 0 center;
  padding-left: 20px;
}

// ::v-deep .viplist_form{
//   display: flex;
//   align-items: center;
// }
::v-deep .viplist_form .el-form-item {
  margin-right: 0;

  margin-bottom: 0 !important;
}

::v-deep .viplist_form .el-form-item:not(:first-child) {
  margin-left: 16px;
}

.status__online {
  color: var(--pcmain-color);
  background-image: url('@/assets/user/online.png');
}

.status__offline {
  color: #778090;
  background-image: url('@/assets/user/offline.png');
}




.user_title {
  width: 300px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 16px 16px 16px 0;
  color: #333333;
}

.item {
  width: 100%;
  height: 340px;
  border: 2px solid #ebebeb;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;

  .content {
    width: 100%;
    height: calc(100% - 40px);
  }

  .buttons {
    width: 100%;
    height: 40px;
    background-color: #fafafa;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user_buttons {
      display: flex;
      align-items: center;

      .button_item {
        margin-left: 16px;
      }
    }
  }
}

.login_success {
  border: 2px solid #67C23A;
}
</style>